<template>
	
	<tm-fullView>
		<tm-menubars title="定位组件" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="px-24 d-inline-block">
				<tm-position :position="{ top: true }" :offset="[0, -10]">
					<template v-slot:default>
						文字内容
					</template>
					<template v-slot:position>
						<view class="blue text-size-xs" style="width: max-content;">左上</view>
					</template>
				</tm-position>
			</view>
			<view class="px-24 d-inline-block">
				<tm-position :position="{ top: true, right: true }" :offset="[0, -10]">
					<template v-slot:default>
						文字内容
					</template>
					<template v-slot:position>
						<view class="blue text-size-xs" style="width: max-content;">左右</view>
					</template>
				</tm-position>
			</view>
			<view class="px-24 d-inline-block">
				<tm-position :position="{ bottom: true, left: true }" :offset="[0, 10]">
					<template v-slot:default>
						文字内容
					</template>
					<template v-slot:position>
						<view class="blue text-size-xs" style="width: max-content;">底左</view>
					</template>
				</tm-position>
			</view>
			<view class="px-24 d-inline-block">
				<tm-position :position="{ bottom: true, right: true }" :offset="[0, 10]">
					<template v-slot:default>
						文字内容
					</template>
					<template v-slot:position>
						<view class="blue text-size-xs" style="width: max-content;">底右</view>
					</template>
				</tm-position>
			</view>
		</tm-sheet>
		<tm-sheet :shadow="24">
			
			<view class="px-24 d-inline-block">
				<tm-position :offset="[0, -10]">
					<template v-slot:default>
						<view><tm-avatar></tm-avatar></view>
					</template>
					<template v-slot:position>
						<view class="blue text-size-xs text-align-center round-10" style="width: 50%;">定位</view>
					</template>
				</tm-position>
				
				<view class="py-15">
					<tm-position :position="{ right: true,  }"  :offset="[-5, -35]">
						<template v-slot:default>
							<view>
								<tm-images :width="200" src="https://picsum.photos/200"></tm-images>
							</view>
						</template>
						<template v-slot:position>
							<view class="text-align-right">
								<view class="green text-size-xs text-align-center round-10 py-10" style="width: 70upx;line-height: 30upx;" >
									<tm-icons :size="24" color="white" name="icon-heart-fill"></tm-icons>
								</view>
							</view>
						</template>
					</tm-position>
					
				</view>
			</view>
		</tm-sheet>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmPosition from "@/tm-vuetify/components/tm-position/tm-position.vue"
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	import tmImages from "@/tm-vuetify/components/tm-images/tm-images.vue"
	import tmAvatar from "@/tm-vuetify/components/tm-avatar/tm-avatar.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmButton,tmPosition,tmIcons,tmImages,tmAvatar},
	data() {
		return {};
	}
};
</script>

<style lang="less"></style>
